import {PlAddress, Plc, PlCollapse, PlForm, PlFormItem, PlInput, PlOv, PlStep, PlStepGroup, PlTable} from "plain-design";
import React from "react";
import {designProPage} from "../designProPage";
import {reactive} from "plain-design-composition";

export default designProPage(() => {

    const state = reactive({
        formData: {
            prodName: '休闲商务男衬衫',
            prodCode: '1004896692837',
            shopName: '某不知名店铺',
            weight: '400g',
            prodNum: 'SULP-FGRV-FGHY',
            prodMaterial: 'fiber',
            fitPeopleType: 'teenager',
            fitSeasonType: ['spring', 'autumn'],
            fitStyle: 'leisure',

            province: '630000',
            city: '632500',
            district: '632525',

            contractName: '某某某',
            contractPhone: '139*****321',
            email: 'm********@**.com',
            detailAddress: '二仙桥成华大道',
            comments: '一起包装',
            distribution: 'normal_delivery',
        } as any
    })

    const deliveryList = [
        {title: '待交付', time: '2021-09-09 21:44:52', message: '待出库交付快递公司。'},
        {title: '拣货', time: '2021-09-09 21:44:52', message: '第三方卖家正在拣货。'},
        {title: '准备出库', time: '2021-09-09 21:44:52', message: '商家已经确认，您的订单已经准备出库。'},
        {title: '已下单', time: '2021-09-09 21:44:52', message: '您已经提交订单，等待商家确认。'},
    ]

    return () => <>
        <div className="pro-page-header">
            <h1>高级表单</h1>
            <p>展示一个字段结构稍微多一点的表单页面</p>
        </div>
        <div className="pro-page-card no-padding">
            <PlCollapse title="商品信息">
                <PlForm column={3}>
                    <PlFormItem label="商品名称">
                        <PlInput v-model={state.formData.prodName}/>
                    </PlFormItem>
                    <PlFormItem label="商品编号">
                        <PlInput v-model={state.formData.prodCode}/>
                    </PlFormItem>
                    <PlFormItem label="店铺">
                        <PlInput v-model={state.formData.shopName}/>
                    </PlFormItem>
                    <PlFormItem label="毛重">
                        <PlInput v-model={state.formData.weight}/>
                    </PlFormItem>
                    <PlFormItem label="货号">
                        <PlInput v-model={state.formData.prodNum}/>
                    </PlFormItem>
                    <PlFormItem label="材质">
                        <PlOv ov="MATERIAL_TYPE" v-model={state.formData.prodMaterial}/>
                    </PlFormItem>
                    <PlFormItem label="适用人群">
                        <PlOv ov="FIT_PEOPLE_TYPE" v-model={state.formData.fitPeopleType}/>
                    </PlFormItem>
                    <PlFormItem label="适用季节">
                        <PlOv ov="SEASON_TYPE" multiple v-model={state.formData.fitSeasonType}/>
                    </PlFormItem>
                    <PlFormItem label="适用风格">
                        <PlOv ov="FIT_STYLE" v-model={state.formData.fitStyle}/>
                    </PlFormItem>
                </PlForm>
            </PlCollapse>
        </div>
        <div className="pro-page-card no-padding">
            <PlCollapse title="收货信息">
                <PlForm column={3}>
                    <PlFormItem label="收件人姓名">
                        <PlInput v-model={state.formData.contractName}/>
                    </PlFormItem>
                    <PlFormItem label="收件人手机号">
                        <PlInput v-model={state.formData.contractPhone}/>
                    </PlFormItem>
                    <PlFormItem label="邮箱">
                        <PlOv ov="FIT_PEOPLE_TYPE" v-model={state.formData.email}/>
                    </PlFormItem>
                    <PlFormItem label="省">
                        <PlAddress province v-model={state.formData.province}/>
                    </PlFormItem>
                    <PlFormItem label="市">
                        <PlAddress city v-model={state.formData.city} parentValue={state.formData.province}/>
                    </PlFormItem>
                    <PlFormItem label="区/县">
                        <PlAddress district v-model={state.formData.district} parentValue={state.formData.city}/>
                    </PlFormItem>
                    <PlFormItem label="详细地址" block>
                        <PlOv ov="MATERIAL_TYPE" v-model={state.formData.detailAddress}/>
                    </PlFormItem>
                    <PlFormItem label="备注说明" block>
                        <PlInput textarea v-model={state.formData.comments}/>
                    </PlFormItem>
                    <PlFormItem label="配送方式">
                        <PlOv ov="DELIVERY_TYPE" v-model={state.formData.distribution}/>
                    </PlFormItem>
                </PlForm>
            </PlCollapse>
        </div>

        <div className="pro-page-card no-padding">
            <PlCollapse title="物流信息">
                <PlStepGroup dotIcon vertical style={{padding: '32px'}}>
                    {deliveryList.map((item, index) => (
                        <PlStep title={item.title} key={index} status={index === 0 ? 'process' : 'finish'}>
                            {{
                                content: () => <>
                                    <div>
                                        {item.message}
                                    </div>
                                    <div>
                                        {item.time}
                                    </div>
                                </>
                            }}
                        </PlStep>
                    ))}
                </PlStepGroup>
            </PlCollapse>
        </div>

        <div className="pro-page-card no-padding">
            <PlCollapse title="赠品信息">
                <PlTable showRows={5}>
                    <Plc title="名称"/>
                    <Plc title="数量"/>
                    <Plc title="单位"/>
                </PlTable>
            </PlCollapse>
        </div>
    </>
})